<template>
  <section class="order-table-box">
    <div class="order-filter-btns">
      <div
        v-for="btn in filterBtns"
        :key="btn.key"
        class="filter-btn"
        :class="btn.key === activeKey ? 'active-btn' : ''"
        @click="filterStatus(btn.key)"
      >
        {{ btn.label }}
      </div>
    </div>
    <div class="table-contain">
      <a-table
        :data-source="tableData"
        :scroll="{ x: 1500 }"
        :columns="columns"
        :pagination="pagination"
        row-key="id"
        bordered
      >
        <template #manner="{ text: manner }">
          <span>{{ afterSaleManner[manner || 0] }}</span>
        </template>
        <template #status="{ text: status }">
          <span>{{ afterSaleStatus[status || 0] }}</span>
        </template>
        <template #action="{ record }">
          <a-popconfirm
            title="请确认是否同意退款？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="changeReimburse(record, true)"
          >
            <a-button type="primary" size="small" style="margin-right: 4px; font-size: 12px">
              同意
            </a-button>
          </a-popconfirm>
          <a-popconfirm
            title="请确认是否拒绝退款？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="changeReimburse(record, false)"
          >
            <a-button type="danger" size="small" style="font-size: 12px"> 拒绝 </a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, reactive, inject, watch, toRefs } from 'vue'
import { AfterSaleParams, ReimburseParams } from '@/model/order/AfterSale'
import { columns, filterBtns, tableEnum1, tableEnum2 } from './tableConfig'
import { judgeReimburse } from '@/api/order/order'
import { message } from 'ant-design-vue'

export default defineComponent({
  props: {
    tableRes: {
      type: Object,
      default: null,
    },
  },
  emits: ['getTable'],
  setup(props, { emit }) {
    const params: AfterSaleParams = inject('params')!
    const state = reactive({
      filterBtns: [...filterBtns],
      columns: [...columns],
      afterSaleManner: [...tableEnum1],
      afterSaleStatus: [...tableEnum2],
      activeKey: 0,
      tableData: [],
      total: 0,
    })
    const pagination = {
      showSizeChanger: true,
      showQuickJumper: true,
      size: 'small',
      showTotal: () => `共${state.total}条`,
      pageSize: params.size,
      total: state.total,
      pageSizeOptions: ['5', '10', '15', '20'],
      onChange: (current: number) => handleSizeChange(current),
      onShowSizeChange: (current: number, pageSize: number) => {
        handlePageChange(current, pageSize)
      },
    }
    const reimburseParams: ReimburseParams = {
      id: 1,
      isAgree: false,
    }
    const handlePageChange = (page: number, pageSize: number) => {
      params.current = 1
      params.size = pageSize
      emit('getTable')
    }
    const handleSizeChange = (current: number) => {
      params.current = current
      emit('getTable')
    }
    const filterStatus = (key: number) => {
      if (key) {
        params.status = key
      } else {
        delete params.status
      }
      state.activeKey = key
      emit('getTable')
    }
    const reimburseChange = async () => {
      try {
        await judgeReimburse(reimburseParams)
        message.success('操作成功')
        // emit('getTable')
      } catch (err) {
        console.log(err)
      }
    }
    // any类型 需要更改为ref的表格数据类型 mark一下
    const changeReimburse = (record: any, isAgree: boolean) => {
      reimburseParams.id = record.id
      reimburseParams.isAgree = isAgree
      reimburseParams.receiverProvince = record.receiverProvince
      reimburseParams.receiverCity = record.receiverCity
      reimburseParams.receiverArea = record.receiverArea
      reimburseParams.receiverAddress = record.receiverAddress
      reimburseChange()
    }
    watch(
      () => props.tableRes,
      (value) => {
        state.tableData = value.records
        console.log(state.tableData)
        state.total = value.total
      },
    )
    return {
      pagination,
      ...toRefs(state),
      changeReimburse,
      filterStatus,
    }
  },
})
</script>

<style lang="scss" scoped>
.order-table-box {
  margin-top: 20px;

  .order-filter-btns {
    display: flex;

    .filter-btn {
      width: 80px;
      cursor: pointer;
      text-align: center;
      color: #505050;
      background: rgba(243, 243, 243, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      padding: 8px 0;

      &:hover {
        background: #d9d9d9;
      }
    }

    .active-btn {
      background: #fff;
    }
  }
  .table-contain {
    margin-top: 10px;
  }
}
</style>
